<template>
  <van-tabbar v-model="active" fixed>
    <van-tabbar-item icon="home-o" to="/home/homepage">{{$t('home.tabbars.homepage')}}</van-tabbar-item>
    <van-tabbar-item icon="search" to="/home/monitor">{{$t('home.tabbars.supervisory_control')}}</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/home/community"
      >{{$t('home.tabbars.community')}}</van-tabbar-item
    >
    <van-tabbar-item icon="setting-o" to="/home/my">{{$t('home.tabbars.my')}}</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
  import { ref, onMounted } from "vue";
  const active = ref(0);
  onMounted(() => {
    const navBarActive = window.location.pathname;
    if (navBarActive.includes("/home/homepage")) {
      active.value = 0;
    } else if (navBarActive.includes("/home/monitor")) {
      active.value = 1;
    } else if (navBarActive.includes("/home/community")) {
      active.value = 2;
    }
   else if (navBarActive.includes("/home/my")) {
      active.value = 3;
    }
  });
</script>

<style scoped lang="scss">
  .van-tabbar {
    max-width: 768px;
    min-width: 350px;

    @media (min-width: 768px) {
      left: auto;
    }
  }
</style>
